<template>
  <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
    <div style="margin-bottom: 5px;box-sizing: border-box;padding: 10px 20px;display: flex;background-color: #fff;font-size: 12px;">
      <div>
        <span>选择条件:</span>
        <template>
          <el-select v-model="indexValue" placeholder="请选择" size="mini" style="margin-right: 20px;">
            <el-option
              v-for="item in tableIndex"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </div>
      <div style="margin-right: 20px;">
        <span>年份:</span>
        <el-input v-model="year" placeholder="请输入年份" style="width: 200px;" size="mini" clearable :maxlength="4"></el-input>
      </div>
      <div>
        <span>月份:</span>
        <template>
          <el-select v-model="month" placeholder="请选择月份" size="mini" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </div>
      <el-button type="primary" style="margin-left: 20px;" size="mini"
      @click="indexValue==0?'':indexValue==1?(defaultMethod(),goodsSalesMethod()):indexValue==2?(defaultMethod()):(goodsSalesMethod())">查询</el-button>
      <el-button type="success" size="mini" @click="synthesisQuery">导出为Excel</el-button>
    </div>
    <div id="main" style="display: flex;width: 100%;flex:1;background-color: #fff;">
        <div id="sumSales" style="width: 50%;"></div>
        <div style="width: 50%;">
          <div id="goodsSalesNum" style="width: 100%;height: 50%">
          </div>
          <div id="goodsSalesPrice" style="width: 100%;height: 50%;">
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
import { Header } from 'element-ui';
  export default{
    data() {
      return{
        year:"",
        month:"",

        indexValue:0,
        tableIndex:[
          {
            value: 0,
            label: '未启用'
          },
          {
            value: 1,
            label: '综合查询'
          },
          {
            value: 2,
            label: '总和查询'
          },
          {
            value: 3,
            label: '商品查询'
          },
        ],

        options: [{
          value: '01',
          label: '一月'
        },{
          value: '02',
          label: '二月'
        },{
          value: '03',
          label: '三月'
        },{
          value: '04',
          label: '四月'
        },{
          value: '05',
          label: '五月'
        },{
          value: '06',
          label: '六月'
        },{
          value: '07',
          label: '七月'
        },{
          value: '08',
          label: '八月'
        },{
          value: '09',
          label: '九月'
        },{
          value: '10',
          label: '十月'
        },{
          value: '11',
          label: '十一月'
        },{
          value: '12',
          label: '十二月'
        },],

        option:{},

        goodsSales:{},
        goodsSalesNum:{},
        goodsSalesPrice:{},
      }
    },
    mounted() {
      this.defaultMethod()
      this.goodsSalesMethod()
    },
    methods:{
      synthesisQuery(){
        if(this.indexValue == 0){
          console.log('执行返回方法')
          return;
        }
        window.open('/api/CakeShop/exportAsExcel?year='+this.year+"&month="+this.month+"&indexValue="+this.indexValue)
      },

      defaultMethod(){
        var myChart = echarts.init(document.getElementById('sumSales'));
        this.$http.get('/api/CakeShop/OrderManage/querySalesGroupByMonth?year='+this.year+"&month="+this.month)
        .then((res)=>{
          if(res.data.code == 200){
            var arr = []
            var arr1 = []
            var arr2 = []
            for(var [key,value] of res.data.sumSalesList.entries()){
              arr.push(value.month)
              arr1.push(value.monthSumNum)
              arr2.push(value.monthSumPrice)
            }
            this.option = {
              // Make gradient line here
              visualMap: [
                {
                  show: false,
                  type: 'continuous',
                  seriesIndex: 0,
                  min: 0,
                  max: 400
                },
                {
                  show: false,
                  type: 'continuous',
                  seriesIndex: 1,
                  dimension: 0,
                  min: 0,
                  max: arr.length - 1
                }
              ],
              title: [
                {
                  left: 'center',
                  text: '销售数量'
                },
                {
                  top: '55%',
                  left: 'center',
                  text: '销售额度'
                }
              ],
              tooltip: {
                trigger: 'axis'
              },
              xAxis: [
                {
                  data: arr
                },
                {
                  data: arr,
                  gridIndex: 1
                }
              ],
              yAxis: [
                {},
                {
                  gridIndex: 1
                }
              ],
              grid: [
                {
                  bottom: '60%'
                },
                {
                  top: '60%'
                }
              ],
              series: [
                {
                  type: 'line',
                  showSymbol: false,
                  data: arr1
                },
                {
                  type: 'line',
                  showSymbol: false,
                  data: arr2,
                  xAxisIndex: 1,
                  yAxisIndex: 1
                }
              ],
            };
            this.option && myChart.setOption(this.option);
            window.addEventListener("resize", function () {
              myChart.resize();
            })
          }
        })
      },
      goodsSalesMethod(){
        var goodsSalesNum = echarts.init(document.getElementById('goodsSalesNum'), 'dark');
        var goodsSalesPrice = echarts.init(document.getElementById('goodsSalesPrice'), 'dark');
        //indexValue='+this.indexValue+'&
        this.$http.get('/api/CakeShop/OrderManage/querySalesDetail?year='+this.year+"&month="+this.month).then((res=>{
          if(res.data.code == 200){
            if(res.data.goodsSalesList == null || res.data.goodsSalesList.length == 0){
              this.$message({
                message: "未查询到相关数据,可能需要查询的数据为空或不存在",
                type: "error",
                duration: 1500,
              })
              return;
            }
            var date = res.data.goodsSalesList[0].month;
            var arr = [];
            var arr1 = [];
            var arr2 = [];
            for(var [key,value] of res.data.goodsSalesList.entries()){
              arr.push(value.goodsName)
              arr1.push(value.goodsSaleNum)
              arr2.push(value.goodsSalePrice)
            }
            this.goodsSalesNum = {
              xAxis: {
                type: 'category',
                data: arr
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: arr1,
                  type: 'bar'
                }
              ],
              title:{
                left: 'center',
                text: date+'商品销售量'
              },
              tooltip: {
                trigger: 'axis'
              },
            };
            this.goodsSalesPrice = {
              xAxis: {
                type: 'category',
                data: arr
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: arr2,
                  type: 'line'
                }
              ],
              title:{
                left: 'center',
                text: date+'商品销售额度'
              },
              tooltip: {
                trigger: 'axis'
              },
            };
            this.goodsSalesNum && goodsSalesNum.setOption(this.goodsSalesNum);
            this.goodsSalesPrice && goodsSalesPrice.setOption(this.goodsSalesPrice)
            //设置自适应大小
            window.addEventListener("resize", function () {
              goodsSalesNum.resize();
              goodsSalesPrice.resize();
            })
          }else{
            this.$message({
              message: res.data.msg,
              type: "error",
              duration: 1000,
            })
          }
        }))
      },
    },
  }
</script>

<style scoped>
</style>
